<!-- 2:彩妆热卖产品列表(鼠标放上去显示商品的图片可以不实现) -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业4：商品分类页面</title>
		<style>
			#main {
				background-color: aliceblue;
				border: transparent;
				/* border-radius: 5%; */
				width: 320px;
				/*设定超过隐藏*/
				overflow: hidden;
			}

			#main div {
				/* border: 1px dashed darkgray; */
				border-bottom: dashed 1px darkgrey;
				float: top;
				height: 40px;
				width: 320px;
				/* background-color: blue; */
				margin: 1px;
				/* color:white; */
				text-align: left;
				padding-left: 0em;
				line-height: 40px;
			}

			a.tupian {
				color: gray;
				position: absolute;
				image: 50%;
				text-decoration: none;
				/* top: 0.7em; */
				font-size: 15px;
				padding-left: 10px;
			}
			a:hover{
				color: greenyellow;
			}
			#title{
				border: transparent;
				width: 310px;
				height: 40px;
				background-color: deeppink;
				color: white;
				line-height: 40px;
				padding-left: 10px;
			}
			span{
				display: inline-block;
				width: 26px;
				height: 26px;
				color: white;
				border-radius: 50%;
				background-color: dimgray;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="title">大家都喜欢的彩妆</div>
		<div id="main">
			<div><span>1</span><a href="#" class="tupian"> Za姬芮新能真皙美白隔离霜 35g</a></div>
			<div><span>2</span><a href="#" class="tupian"> 美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml</a></div>
			<div><span>3</span><a href="#" class="tupian"> 菲奥娜水漾CC霜40g</a></div>
			<div><span>4</span><a href="#" class="tupian"> DHC 蝶翠诗橄榄卸妆油 200ml</a></div>
		</div>
	</body>
</html>